<script setup lang="ts">
import type { PIItem } from "./apis/type"
import moment from "moment"
import VuePdfEmbed from "vue-pdf-embed"
import { getPIById } from "./apis"

// optional styles
import "vue-pdf-embed/dist/styles/annotationLayer.css"
import "vue-pdf-embed/dist/styles/textLayer.css"

const route = useRoute()

const pi = ref<PIItem>({
  id: 0,
  no: "",
  invoicePdf: "",
  brandName: "",
  customerName: "",
  kind: "",
  invoiceDate: "",
  totalSaleUs: 0,
  totalProfitUs: 0
})

function formatCurrency(value: number) {
  return new Intl.NumberFormat("de-DE").format(value)
}

onMounted(() => {
  const id = route.params.id as string
  getPIById({ id }).then((data) => {
    pi.value = data.data
  })
})
</script>

<template>
  <div un-py-16px>
    <van-cell-group inset>
      <van-cell title="Invoice number" :value="pi.no" />
      <van-cell title="Invoice Date" :value="moment(pi.invoiceDate).format('YYYY-MM-DD')" />
      <van-cell title="Customer" :value="pi.customerName" />
      <van-cell title="Brand" :value="pi.brandName" />
      <van-cell title="Kind" :value="pi.kind" />
      <van-cell title="Sale" :value="formatCurrency(pi.totalSaleUs)" />
      <van-cell title="Profit" :value="formatCurrency(pi.totalProfitUs)" />
      <VuePdfEmbed v-if="pi.invoicePdf" annotation-layer text-layer :source="pi.invoicePdf" />
    </van-cell-group>
  </div>
</template>
